/**
 * Common part of form field element
 */
export const formFieldMixin = {
  props: {
    className: {
      type: String,
      default: ''
    },
    /**
     * 控制form element是否可以编辑
     */
    disabled: {
      type: [Boolean, String, Number],
      default: false
    },
    /**
     * 可选值：inline|block
     * 控制form element是块级元素还是行内元素
     */
    display: {
      type: String,
      default: 'inline'
    },
    /**
     * 在v-model改变field值之前执行
     * 如果该方法返回false，v-model不会改变field的值
     * 支持Promise类型的function
     * 该方法入参为已选选中元素集合或者是输入内容
     */
    onChangeBefore: {
      type: Function,
      default: () => true
    },
    /**
     * 在v-model改变field值之后执行
     * 注入的第一个参数是已选中元素的value的集合
     * 注入的第二个参数是已选中元素的option的集合
     */
    onChangeAfter: {
      type: Function,
      default: (checkedVals, checkedOptions) => ({checkedVals, checkedOptions})
    },
    /**
     * 可选值：true|false
     * 控制判值使用全等还是非全等
     */
    strict: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    _display () {
      return this.display === 'inline' ? '' : '-block'
    },
    _class () {
      return this.className
    }
  },
  methods: {
    /**
     * disabled为true时，form feild元素不可编辑
     * @param {*} callback 为onChangeBefore成功执行之后的回调
     * 选择元素和输入元不一样，需要在这两类中分别实现callback
     * callback的入参是onChangeAfter
     */
    _onBaseIntercept(callback, val, reject = _ => _) {
      if (!this.disabled) {
        const result = this.onChangeBefore(val)
        if (result) {
          if (result.then) {
            result.then(res => res && callback(this.onChangeAfter))
          } else {
            callback(this.onChangeAfter)
          }
        } else {
          reject()
        }
      }
    }
  }
}
